<template>
	<view class="main-page">
		<view class="top-box">
			<image class="back-ic" src="../../static/common/ic_back_grey.png" @click="goBack"></image>
			<view class="input-box">
				<image src="../../static/common/ic_search.png" class="search-ic"></image>
				<input 
					v-model="shopName"
					placeholder-class="font-999-28"
					class="font-333-28"
					placeholder="请输入店铺名称"
					maxlength="30"
					type="text"
					confirm-type="search"
					@confirm="handleSearch"
					@input="changeInputValue"
				/>
			</view>
		</view>
		<!--  搜索历史 -->
		<view class="column-container" style="width: 100%;" v-if="!showSearchResult">
			<view class="history-top-box">
				<text class="font-333-28" style="font-weight: bold;">搜索历史</text>
				<text class="font-333-28" @click="showClearWindow = true">清空记录</text>
			</view>
			<view class="history-list-box">
				<text class="single-history-box" @click="clickHistoryItem(historyItem)"
				v-for="(historyItem , historyIndex) in historyList" :key="historyIndex">
					{{historyItem}}
				</text>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="column-container" v-if="showSearchResult">
			<view class="search-top-box" v-if="dataList.length > 0">
				<text class="font-666-28">与搜索词</text>
				<text class="font-333-28" style="font-weight: 600;">“{{shopName}}”</text>
				<text class="font-666-28">相关的活动</text>
			</view>
			<view class="list-box" v-if="dataList.length > 0">
				<view class="list-item" v-for="(item , index) in dataList" :key="index">
					<view class="row-container-row-between" style="width: 100%;">
						<view class="row-container">
							<view class="img-box">
								<image class="shop-img" src="../../static/index/ic_list_img.png"></image>
								<image class="tag" src="../../static/index/ic_tag_ele.png" 
								mode="heightFix" style="left: 0;"></image>
								<image class="tag" src="../../static/index/ic_tag_around_new.png"
								mode="heightFix" style="right: 0;"></image>
							</view>
							<view class="column-container">
								<text class="title font-333-34" style="font-weight: bold;line-height: 47rpx;">LELEFU乐乐芙网红生日乐乐芙网红生日</text>
								<text class="title font-ff621f-24" style="font-weight: bold;margin-top: 5rpx;">LELEFU限定:芒果淋面小清新生日蛋糕芒果淋面小清新生日蛋糕</text>
								<text class="title font-ca993a-24" style="margin-top: 5rpx;">*指定商品，注意看要求</text>
								<text class="title font-666-24" style="margin-top: 5rpx;">该店离您3.9km</text>
							</view>
						</view>
						<view class="coupon-box">
							<text class="font-fff6e9-24" style="margin-top: 10rpx;">返红包</text>
							<view class="money-box">
								<text class="font-ff4015-40" style="font-weight: bold;">30</text>
								<text class="font-333-20" style="font-weight: bold;margin-top: 10rpx;">元</text>
							</view>
						</view>
					</view>
					<view class="row-container-row-between" style="width: 100%;margin-top: 24rpx;">
						<view class="row-container">
							<text class="act-name">品鉴  |  满60返30</text>
						</view>
						<view class="row-container">
							<progress class="progress-bar" active-color="#FFD100"
							backgroundColor="#F0F0F0" percent="50" border-radius="5"></progress>
							<text class="font-666-26">今天剩余5份</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 搜索无数据 -->
			<view class="column-container-row-center" style="width: 100%;" v-else>
				<image class="no-result-img" src="../../static/common/ic_empty.png"></image>
				<view class="row-container">
					<text class="font-666-28">很抱歉，暂无与搜索词</text>
					<text class="font-333-28" style="font-weight: 600;">“{{shopName}}”</text>
					<text class="font-666-28">相关的活动</text>
				</view>
			</view>
		</view>
		
		<view class="clear-window" v-if="showClearWindow">
			<view class="clear-window-inner">
				<text class="font-333-32" style="font-weight: bold;margin-top: 44rpx;">确定清空历史搜索记录吗？</text>
				<view class="line-divider"></view>
				<view class="row-container" style="width: 100%;height: 96rpx;">
					<text class="btn" @click="showClearWindow = false">我再想想</text>
					<view class="vertical-line"></view>
					<text class="btn" style="font-weight: bold;color: #333333;background: #FFC01F;border-bottom-right-radius: 36rpx;"
					 @click="handleClearHistory">确定</text>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName:'',
				historyList:[],
				latitude:0.0 ,
				longitude:0.0,
				page:1,
				showSearchResult:false,
				dataList:[],
				showClearWindow:false,
				hasMoreData:false
			}
		},
		
		onLoad() {
			this.latitude = this.cookie.get('sc_lat')
			this.longitude = this.cookie.get('sc_lng')
			let historyInfo = uni.getStorageSync("sc_history")
			if (historyInfo){
				this.historyList = historyInfo.split(',')
			}
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			changeInputValue(e){
				if (!e.detail.value){
					this.showSearchResult = false
					this.dataList = []
					this.page = 1
				}
			},
			
			handleSearch(e){
				if (e.detail.value){
					this.shopName = e.detail.value
					if (this.historyList.findIndex((item => item == this.shopName)) == -1){
						this.historyList.push(this.shopName)
					}
					
					if (this.historyList.length > 10){
						this.historyList.splice(0 , 1)
					}
					
					uni.setStorageSync("sc_history" , this.historyList.join(','))
					this.page = 1
					this.loadActivityList()
					this.showSearchResult = true
				}
			},
			
			handleClearHistory(){
				this.historyList = []
				uni.setStorageSync("sc_history" , "")
				this.showClearWindow = false
			},
			
			clickHistoryItem(name){
				this.shopName = name
				this.page = 1
				this.loadActivityList()
				this.showSearchResult = true
			},
			
			loadActivityList(){
				this.dataList = [1,2,3]
			}
			
		}
	}
</script>

<style lang="scss">
	.top-box{
		width: 100%;
		height: 88rpx;
		padding-top: 100rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			margin-left: 22rpx;
			margin-right: 14rpx;
		}
		
		.input-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 364rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
			border: #DDDDDD 1rpx solid;
			padding-left: 20rpx;
			padding-right: 20rpx;
			
			.search-ic{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.history-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.history-list-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 44rpx);
		margin-left: 22rpx;
		margin-right: 22rpx;
		flex-wrap: wrap;
		
		.single-history-box{
			padding: 11rpx 20rpx;
			font-size: 24rpx;
			color: #666666;
			background: white;
			border-radius: 4rpx;
			margin: 0rpx 8rpx 16rpx 8rpx;
			text-align: center;
		}
	}
	
	.search-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.no-result-img{
		width: 192rpx;
		height: 192rpx;
		margin-top: 274rpx;
		margin-bottom: 10rpx;
	}
	
	.clear-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		z-index: 100;
		position: absolute;
		top: 0;
		flex: 1;
		
		.clear-window-inner{
			width: calc(100% - 148rpx);
			height: 230rpx;
			background: white;
			border-radius: 36rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.line-divider{
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				margin-top: 44rpx;
			}
			
			.btn{
				width: 50%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 32rpx;
				color: #999999;
			}
			
			.vertical-line{
				width: 1rpx;
				height: 96rpx;
				background: #EEEEEE;
			}
		}
	}
	
	.list-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
	}
	
	.list-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 36rpx);
		padding: 18rpx;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.img-box{
			display: flex;
			flex-direction: row;
			width: 165rpx;
			height: 165rpx;
			margin-right: 18rpx;
			position: relative;
			flex-shrink: 0;
			
			.shop-img{
				width: 165rpx;
				height: 165rpx;
			}
			
			.tag{
				height: 34rpx;
				position: absolute;
			}
		}
		
		.title{
			max-width: 350rpx;
			white-space: nowrap;
			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 33rpx;
		}
		
		.coupon-box{
			background: linear-gradient(90deg, #FF621F 0%, #FF1F1F 100%);
			width: 100rpx;
			height: 144rpx;
			display: flex;
			flex-direction: column;
			margin-left: 18rpx;
			flex-shrink: 0;
			align-items: center;
			border-radius: 10rpx;
			position: relative;
			
			.money-box{
				width: 96rpx;
				height: 89rpx;
				background: #FFF6E9;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 2rpx;
			}
		}
		
		.act-name{
			background: #FFD100;
			border-radius: 8rpx;
			padding: 4rpx 12rpx;
			font-size: 24rpx;
			color: #333333;
			font-weight: 600;
			margin-right: 10rpx;
			text-align: center;
		}
		
		.progress-bar{
			width: 66rpx;
			height: 10rpx;
			margin-right: 16rpx;
			border-radius: 10rpx;
		}
		
	}
	
	
</style>
